<template>
	<view class="center">
		<xbd-page-card>
			<template>
				<xbd-image-title title="正在进行" :image="require('@/static/image/supervision/proceed.png')"></xbd-image-title>
				<view class="card" v-for="(item,index) in inList " :key="index">
					<xbd-exam-card :myInfo="item" @click="into(item.state,item._id,item.end_time)"></xbd-exam-card>
				</view>
				<xbd-null-list v-if="!inList.length"></xbd-null-list>
			</template>
		</xbd-page-card>
		<xbd-page-card>
			<template>
				<xbd-image-title title="未开始" :image="require('@/static/image/supervision/wait.png')"></xbd-image-title>
				<view class="card" v-for="(item,index) in waitList" :key="index">
					<xbd-exam-card :myInfo="item" ></xbd-exam-card>
				</view>
				<xbd-null-list v-if="!waitList.length"></xbd-null-list>
			</template>
		</xbd-page-card>
		<xbd-page-card>
			<template>
				<xbd-image-title title="已结束" :image="require('@/static/image/supervision/end.png')">
					<template>
						<view class="box-right">
							<xbd-date-pick fields="day" :date="date" :visible.sync="visible" @setDate="setDate">
								<template>
									<view class="date" @click="visible = true">
										<text>{{ date }}</text>
										<image class="date-img" src="@/static/image/down.svg"></image>
									</view>
								</template>
							</xbd-date-pick>
						</view>
					</template>
				</xbd-image-title>
				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholderStyle="font-size:30rpx"
					placeholder="搜索内容" @iconClick="iconClick"></uni-easyinput>

				<uni-list :border="false">
					<view class="card" v-for="(item,index) in showList" :key="index">
						<xbd-exam-card :myInfo="item"  @click="into(item.state,item._id)"></xbd-exam-card>
					</view>
					<xbd-null-list v-if="!showList.length"></xbd-null-list>
					<xbd-loading-more  v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
						</xbd-loading-more>
				</uni-list>
			</template>
		</xbd-page-card>

	</view>
</template>

<script>
	import {
		Mission
	} from '@/api/index.js';
	export default {
		data() {
			return {
				visible: false,
				date: '日期选择',
				statusNum: 0,
				isLoadMore: false,
				value: '',
				showList: [],
				waitList:[],
				inList:[],
				show:false,
				info:{
					page:1,
					perpage:10000,
					type:'wait',
				},
				inInfo:{
					page:1,
					perpage:10000,
					type:'ing',
				},
				endInfo:{
					page:1,
					perpage:10,
					type:'end',
					time:'',
					keyword:''
					
				}
			};
		},
		methods: {
			// 加载更多
			loadmore() {
				this.endInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				try {
					const res = await Mission.getExamList(this.endInfo)
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						console.log(this.showList,'this.showList')
						if (res.data.list.length === this.endInfo.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.endInfo.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.endInfo.page--;
				}
			},
			iconClick() {
				this.endInfo.page = 1
				this.endInfo.keyword = this.value
				this.showList = []
				this.getEndList()
			},
			setDate(date) {
				this.date = date;
				console.log('确定')
				this.endInfo.page = 1
				this.endInfo.time = date
				this.showList = []
				this.getEndList()
			},
				
			into(state,id,val){
				console.log(state,id,val)
				if(state ==='wait'){
					uni.navigateTo({
					  url: `/pages/identify/exam/confirmInfo/confirmInfo?id=${id}&time=${val}`,
					});
				}else{
					uni.navigateTo({
					  url: `/pages/identify/exam/result/result?id=${id}`,
					});
				}
			},
			async getWaitList(){
				const res = await Mission.getExamList(this.info)
				 this.waitList = res.data.list
				console.log(res,'res1')
			},
			async getInList(){
				const res = await Mission.getExamList(this.inInfo)
				 this.inList = res.data.list
				console.log(res,'res1')
			},
			async getEndList(){
				const res = await Mission.getExamList(this.endInfo)
				if (res.data.list.length === this.endInfo.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = []
				this.showList = res.data.list
				console.log(res,'res2')
			},
		},
		async onShow() {
			this.endInfo.page=1;
			uni.pageScrollTo({
			    scrollTop: 0,
			});
			await this.getWaitList()
			await this.getEndList()
			await this.getInList()
		},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}
	::v-deep .uni-list {
		margin-top: 30rpx;
	}
	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	.center {
		padding: 32rpx;

		.card {
			padding: 20rpx 0;
			border-bottom: 2rpx dashed #E5E5E5;
			font-size: 26rpx;
			color: #A0A7B8;


			&:nth-last-child(1) {
				border-bottom: none;
			}
		}
	}

	.date {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 220rpx;
		height: 56rpx;
		border: 2rpx solid #A0A7B8;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 0  16rpx;
		box-sizing: border-box;
		color: #999;

		.date-img {
			width: 34rpx !important;
			height: 34rpx !important;
			margin: 0 !important;
			transform: rotate(90deg)
		}
	}
</style>
